<template>
    <div class="research-project-container">
        <h2 class="page-title">名校研学</h2>

        <el-card class="table-card">
            <div class="table-header">
                <div class="table-title"></div>
                <div class="table-actions">
                    <!-- 刷新按钮 -->
                    <div class="action-item" @mouseenter="showTooltip('刷新')" @mouseleave="hideTooltip">
                        <el-button :icon="Refresh" text @click="handleRefresh" />
                        <div v-if="tooltipContent === '刷新'" class="custom-tooltip">刷新</div>
                    </div>

                    <!-- 密度设置 -->
                    <div class="action-item">
                        <el-dropdown trigger="click" @command="handleDensityChange">
                            <el-button :icon="Menu" text />
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item
                                        command="default"
                                        :class="{ 'active': tableSize === 'default' }"
                                    >
                                        <el-icon v-if="tableSize === 'default'"><Check /></el-icon>
                                        默认
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        command="medium"
                                        :class="{ 'active': tableSize === 'medium' }"
                                    >
                                        <el-icon v-if="tableSize === 'medium'"><Check /></el-icon>
                                        中等
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        command="small"
                                        :class="{ 'active': tableSize === 'small' }"
                                    >
                                        <el-icon v-if="tableSize === 'small'"><Check /></el-icon>
                                        紧凑
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>

                    <!-- 列设置 -->
                    <div class="action-item">
                        <el-popover placement="bottom" width="280" trigger="click">
                            <template #reference>
                                <el-tooltip content="列设置" placement="top">
                                    <el-button :icon="Setting" text />
                                </el-tooltip>
                            </template>
                            <div class="column-settings">
                                <div class="column-header">
                                    <el-checkbox
                                        v-model="allColumnsChecked"
                                        :indeterminate="isIndeterminate"
                                        @change="handleCheckAllChange"
                                    >
                                        列显示/隐藏 (全选)
                                    </el-checkbox>
                                </div>
                                <el-divider />
                                <el-checkbox-group
                                    v-model="checkedColumns"
                                    @change="handleCheckedColumnsChange"
                                >
                                    <div
                                        v-for="column in columnOptions"
                                        :key="column.value"
                                        class="column-item"
                                    >
                                        <el-checkbox :value="column.value">
                                            {{ column.label }}
                                        </el-checkbox>
                                    </div>
                                </el-checkbox-group>
                            </div>
                        </el-popover>
                    </div>
                </div>
            </div>

            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    :size="tableSize"
                    v-loading="loading"
                    border
                    stripe
                    highlight-current-row
                    empty-text="暂无数据"
                >
                    <!-- 动态列 -->
                    <el-table-column
                        v-if="showColumn('id')"
                        prop="id"
                        label="序号"
                        :width="columnWidths.id"
                        align="center"
                    />
                    <el-table-column
                        v-if="showColumn('name')"
                        prop="name"
                        label="项目名称"
                        :width="columnWidths.name"/>
                    <el-table-column
                        v-if="showColumn('description')"
                        prop="description"
                        label="项目描述"
                        :width="columnWidths.description"
                    />
                    <el-table-column
                        v-if="showColumn('researchType')"
                        prop="researchType"
                        label="科研项目类型"
                        :width="columnWidths.researchType"
                        align="center"
                    >
                        <template #default="{ row }">
                            <el-tag :type="researchTypeTag(row.researchType)">
                                {{ row.researchType }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                        v-if="showColumn('projectType')"
                        prop="projectType"
                        label="项目类型"
                        :width="columnWidths.projectType"
                    />
                    <el-table-column
                        v-if="showColumn('subject')"
                        prop="subject"
                        label="学科方向"
                        :width="columnWidths.subject"
                    />
                    <el-table-column
                        v-if="showColumn('mentorCountry')"
                        prop="mentorCountry"
                        label="导师国家"
                        :width="columnWidths.mentorCountry"
                    />
                    <el-table-column
                        v-if="showColumn('startDate')"
                        prop="startDate"
                        label="开课时间"
                        :width="columnWidths.startDate"
                        sortable
                    />
                    <el-table-column
                        v-if="showColumn('contact')"
                        prop="contact"
                        label="联系人姓名"
                        :width="columnWidths.contact"
                    />
                    <el-table-column
                        v-if="showColumn('views')"
                        prop="views"
                        label="浏览次数"
                        :width="columnWidths.views"
                        align="center"
                    />
                    <el-table-column
                        label="操作"
                        :width="columnWidths.action"
                        fixed="right"
                        align="center"
                    >
                        <template #default>
                            <el-button size="small" type="primary">详情</el-button>
                            <el-button size="small" type="success">报名</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Refresh, Menu, Setting, Check } from '@element-plus/icons-vue'

// 模拟数据
const tableData = ref([
    {
        id: 1001,
        name: '人工智能前沿研究',
        description: '麻省理工学院人工智能实验室暑期项目',
        researchType: '基础研究',
        projectType: '暑期研学',
        subject: '计算机科学',
        mentorCountry: '美国',
        startDate: '2024-07-01',
        contact: '张教授',
        views: 2450
    },
    {
        id: 1002,
        name: '生物医学工程实践',
        description: '剑桥大学生物医学工程冬季项目',
        researchType: '应用研究',
        projectType: '冬季研学',
        subject: '生物医学',
        mentorCountry: '英国',
        startDate: '2024-12-15',
        contact: '李研究员',
        views: 1780
    }
])

const loading = ref(false)
const tableSize = ref('default')

// 列配置（带基础宽度）
const columnOptions = [
    { value: 'id', label: '序号', baseWidth: 60 },
    { value: 'name', label: '项目名称', baseWidth: 120 },
    { value: 'description', label: '项目描述', baseWidth: 180 },
    { value: 'researchType', label: '科研项目类型', baseWidth: 100 },
    { value: 'projectType', label: '项目类型', baseWidth: 100 },
    { value: 'subject', label: '学科方向', baseWidth: 110 },
    { value: 'mentorCountry', label: '导师国家', baseWidth: 100 },
    { value: 'startDate', label: '开课时间', baseWidth: 110 },
    { value: 'contact', label: '联系人姓名', baseWidth: 100 },
    { value: 'views', label: '浏览次数', baseWidth: 90 },
    { value: 'action', label: '操作', baseWidth: 140 }
]

// 列宽计算（按比例分配）
const columnWidths = computed(() => {
    const totalBaseWidth = columnOptions.reduce((sum, col) => sum + col.baseWidth, 0)
    const tableWidth = 1400 // 基准宽度
    return columnOptions.reduce((acc, col) => {
        acc[col.value] = Math.floor((col.baseWidth / totalBaseWidth) * tableWidth)
        return acc
    }, {})
})

// 科研类型标签样式
const researchTypeTag = (type) => {
    return type === '基础研究' ? 'primary' : 'success'
}

// 列显示控制
const checkedColumns = ref(columnOptions.map(col => col.value))
const allColumnsChecked = computed({
    get: () => checkedColumns.value.length === columnOptions.length,
    set: (val) => {
        checkedColumns.value = val ? columnOptions.map(col => col.value) : []
    }
})
const isIndeterminate = computed(() => {
    return checkedColumns.value.length > 0 && checkedColumns.value.length < columnOptions.length
})

// 方法
const handleRefresh = () => {
    loading.value = true
    setTimeout(() => loading.value = false, 800)
}

const handleDensityChange = (size) => {
    tableSize.value = size
}

const handleCheckAllChange = (val) => {
    checkedColumns.value = val ? columnOptions.map(col => col.value) : []
}

const handleCheckedColumnsChange = (value) => {
    const checkedCount = value.length
    allColumnsChecked.value = checkedCount === columnOptions.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < columnOptions.length
}

const showColumn = (colName) => checkedColumns.value.includes(colName)
</script>

<style scoped>
.research-project-container {
    padding: 20px;
    height: 100vh;
    box-sizing: border-box;
}

/* 共用表格样式 */
.table-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    background: #f8f9fa;
    border-radius: 4px;
}

.table-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.table-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

.action-item {
    position: relative;
    display: flex;
    align-items: center;
}

/* 列设置样式 */
.column-settings {
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px 8px;
}

.column-item {
    margin: 8px 0;
    padding: 0 8px;
}

/* 自定义工具提示 */
.custom-tooltip {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: #303133;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 2000;
    pointer-events: none;
    white-space: nowrap;
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(5px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 标签样式 */
.el-tag--primary {
    background-color: #ecf5ff;
    border-color: #b3d8ff;
    color: #409EFF;
}

.el-tag--success {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67C23A;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .table-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .custom-tooltip {
        top: -35px;
        font-size: 11px;
        padding: 4px 8px;
    }

    .el-table__body-wrapper {
        overflow-x: auto;
    }
}
</style>